<template>
    <input type="text" placeholder="请输入内容" v-model="val">
    <ul>
        
        <li v-for="item in searchTodoList" :key="item.id">
            <input type="checkbox" name="" id="" v-model="item.state">
            <span>{{ item.title }}</span>
            <button @click="handClickDel(item.id)">删除</button>
        </li>
    </ul>
    <p>选择了{{len}}条数据</p>
</template>

<script setup>
    import axios from 'axios'
    import { computed, ref } from 'vue';

    const todoList = ref([])
    const val = ref('')

    // 选择的条数
    const len = computed(()=>{
        return searchTodoList.value.filter(v => v.state).length;
    })

    // 删除
    const handClickDel = id =>{
        todoList.value = todoList.value.filter(v =>{
            return v.id !== id
        })
    }

    // 筛选数据
    const searchTodoList = computed(()=>{
        return todoList.value.filter((v, i) =>{
            return v.title.includes(val.value)
        })
    })

    // 调用接口，获取数据
    const getDate = () =>{
        axios.get('/api/todoList').then(res => {
            if(res.status === 200 && res.data.code === 200) {
                todoList.value = res.data.data
            }
        })
    }

    getDate()
</script>

<style lang="scss">

</style>